import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

class DioDemo extends StatefulWidget {
  const DioDemo({super.key});

  @override
  State<DioDemo> createState() => _DioDemoState();
}

class _DioDemoState extends State<DioDemo> {
  // 定义List存储数据
  List _orderList = [];

  @override
  void initState() {
    // 获取订单数据
    loadData();
    super.initState();
  }

  void loadData() async {
    // 1. 准备请求的地址
    String path = 'https://mock.boxuegu.com/mock/1172/orders';
    // 2. 创建http client
    Dio dio = Dio();
    // 3. 发送请求
    Response res = await dio.get(path);
    // 4. 刷新订单列表数据
    setState(() {
      _orderList = res.data;
    });
  }

  String getOrderState(int state) {
    String orderState = '待付款';
    switch (state) {
      case 1:
        orderState = '待付款';
        break;
      case 2:
        orderState = '待发货';
        break;  
      case 3:
        orderState = '待收货';
        break;
      case 4:
        orderState = '待评价';
        break;
      default:
        orderState = '其它';
    }
    return orderState;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          '网络请求-小案例',
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.pink,
        centerTitle: true,
      ),
      body: ListView.separated(
          itemBuilder: (BuildContext context, int index) {
            Map orderInfo = _orderList[index];
            return Container(
              padding: const EdgeInsets.all(15),
              child: Column(
                children: [
                  // 2.1 日期 和 订单状态
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(orderInfo['createTime']),
                      Text(
                        getOrderState(orderInfo['orderState']),
                        style: const TextStyle(color: Colors.deepOrange),
                      )
                    ],
                  ),
                  // 2.2 图片 + 名称 + 数量 + 规格 + 单价
                  Padding(
                    padding: const EdgeInsets.only(top: 10),
                    child: Row(
                      children: [
                        // 2.2.1 左侧图片
                        Image.network(
                          orderInfo['image'],
                          width: 100,
                          height: 100,
                          fit: BoxFit.cover,
                        ),
                        // 2.2.2 右侧
                        Expanded(
                            child: Padding(
                          padding: const EdgeInsets.only(left: 8),
                          child: Column(
                            // 侧轴左对齐
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              // 右侧上部第一行
                              Row(
                                children: [
                                  // 标题
                                  Expanded(child: Text(orderInfo['name'])),
                                  // 数量
                                  Padding(
                                    padding: const EdgeInsets.only(left: 8),
                                    child: Text('x ${orderInfo['totalNum']}'),
                                  )
                                ],
                              ),
                              // 右侧第二行
                              Padding(
                                padding: const EdgeInsets.only(top: 8),
                                child: Container(
                                  padding: const EdgeInsets.only(
                                      left: 8, right: 8, top: 2, bottom: 2),
                                  decoration: BoxDecoration(
                                      color: const Color.fromARGB(
                                          255, 232, 228, 227),
                                      borderRadius: BorderRadius.circular(3)),
                                  child: Text(
                                    orderInfo['attrsText'],
                                    style: const TextStyle(
                                        color:
                                            Color.fromARGB(255, 111, 111, 111)),
                                  ),
                                ),
                              ),
                              // 右侧第三行
                              Padding(
                                padding: const EdgeInsets.only(top: 8),
                                child: Text(
                                  "¥ ${orderInfo['curPrice']}",
                                ),
                              )
                            ],
                          ),
                        )),
                      ],
                    ),
                  ),
                  // 3. 合计
                  Padding(
                    padding: const EdgeInsets.only(top: 8),
                    child: Container(
                      // color: Colors.red,
                      alignment: Alignment.centerRight,
                      child: Text(
                          '合计: ¥${orderInfo['curPrice'] * orderInfo['totalNum']}'),
                    ),
                  ),
                  // 4. 再次购买
                  Padding(
                    padding: const EdgeInsets.only(top: 8),
                    child: Container(
                        // color: Colors.red,
                        alignment: Alignment.centerRight,
                        child: Container(
                          padding: const EdgeInsets.only(
                              left: 5, right: 5, top: 3, bottom: 3),
                          decoration: BoxDecoration(
                              border: Border.all(
                                  color: const Color.fromARGB(255, 56, 55, 55)),
                              borderRadius: BorderRadius.circular(3)),
                          child: const Text(
                            '再次购买',
                            style: TextStyle(
                                color: Color.fromARGB(255, 36, 31, 31)),
                          ),
                        )),
                  )
                ],
              ),
            );
          },
          separatorBuilder: (BuildContext context, int index) {
            return Container(
              margin: const EdgeInsets.only(left: 9, right: 8),
              height: 1,
              color: const Color.fromARGB(255, 213, 212, 212),
            );
          },
          itemCount: _orderList.length),
    );
  }
}
